<template>
    <view class="modal_parent" :style="{ zIndex: zIndex }" v-if="isShow">
        <view class="modal_mask" v-if="mask && showModal" :style="[maskStyle, { zIndex: zIndex }]" @tap.stop="maskClose"></view>
        <view
            class="modal_box"
            :class="[showModal ? `modal_box_open` : '', `modal_box_${mode}`]"
            :style="[positionStyle, { zIndex: zIndex + 1 }]"
        >
            <view class="modal" :style="[modalStyle, { zIndex: zIndex + 2 }]">
                <slot></slot>
            </view>
            <view class="closeIcon" v-if="closeable" :style="{ height: bottomHeight, zIndex: zIndex + 2 }">
                <image @tap.stop="close" src="@/static/common/close.png" class="icon"></image>
            </view>
        </view>
    </view>
</template>
<script lang="ts">
import { Component, Vue, Prop, PropSync, Watch } from 'vue-property-decorator';
@Component
export default class LxModal extends Vue {
    // 是否显示
    @PropSync('show', { type: Boolean, default: false })
    readonly isShow!: boolean;

    // 高度
    @Prop({ type: String, default: '100%' })
    readonly height!: string;

    // 最大高
    @Prop({ type: String, default: null })
    readonly maxHeight!: string;

    // 最小高
    @Prop({ type: String, default: null })
    readonly minHeight!: string;

    // 宽度
    @Prop({ type: String, default: '100%' })
    readonly width!: string;

    // 图标距离底部高度
    @Prop({ type: String, default: '44rpx' })
    readonly bottomHeight!: string;

    // 弹出位置
    @Prop({ type: String, default: 'center' })
    readonly mode!: string;

    // 自定义圆角
    @Prop({ type: String, default: '12rpx' })
    readonly borderRadius!: string;

    // 弹出层级
    @Prop({ type: Number, default: 100000 })
    readonly zIndex!: number;

    // 点击遮罩是否关闭弹框
    @Prop({ type: Boolean, default: false })
    readonly maskCloseAble!: boolean;

    // 是否显示遮罩
    @Prop({ type: Boolean, default: true })
    readonly mask!: boolean;

    // 是否显示关闭图标
    @Prop({ type: Boolean, default: true })
    readonly closeable!: boolean;

    // 遮罩层样式
    @Prop({ type: Object, default: null })
    readonly maskStyle!: object;

    // 弹框样式
    @Prop({ type: Object, default: null })
    readonly modalCustomStyle!: object;

    // 是否显示弹框
    protected showModal: boolean = false;
    constructor() {
        super();
    }

    @Watch('isShow', { immediate: true })
    onIsShow(val) {
        if (val) {
            this.open();
        } else {
            this.close();
        }
    }

    mounted() {
        if (this.isShow) {
            this.open();
        }
    }

    get positionStyle() {
        let style = {};
        switch (this.mode) {
            case 'top':
                style = {
                    top: '0',
                    left: '0',
                    right: '0',
                    transform: `translate3D(0px,-100%,0px)`,
                };
                break;
            case 'bottom':
                style = {
                    bottom: '0',
                    left: '0',
                    right: '0',
                    transform: `translate3D(0px,100%,0px)`,
                };
                break;
            case 'left':
                style = {
                    top: '0',
                    left: '0',
                };
                break;
            case 'right':
                style = {
                    top: '0',
                    right: '0',
                };
                break;
        }
        return style;
    }

    get modalStyle() {
        let style: any = {
            width: this.width,
            borderRadius: this.borderRadius,
        };
        if (this.maxHeight) {
            style.maxHeight = this.maxHeight;
        } else if (this.minHeight) {
            style.minHeight = this.minHeight;
        } else {
            style.height = this.height;
        }
        if (this.modalCustomStyle) {
            style = Object.assign(style, this.modalCustomStyle);
        }
        return style;
    }

    open(): void {
        this.$nextTick((): void => {
            setTimeout((): void => {
                this.showModal = true;
            }, 50);
        });
    }

    maskClose() {
        if (this.maskCloseAble) {
            this.close();
        }
    }

    close() {
        // this.$emit('update:show', false);
        this.showModal = false;
        setTimeout(() => {
            this.$emit('update:show', false);
        }, 200)
        this.$emit('close');
    }
}
</script>
<style lang="scss" scoped>
.modal_parent {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .modal_mask {
        position: relative;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #000000;
        opacity: 0.5;
    }
    .modal_box {
        position: absolute;
        transition: all 0.2s;
        opacity: 0;
        .modal {
            background: #ffffff;
            overflow-y: auto;
        }
        .closeIcon {
            width: 100%;
            margin-top: 76rpx;
            display: flex;
            justify-content: center;
            align-self: flex-end;
            align-items: flex-end;
            .icon {
                width: 76rpx;
                height: 76rpx;
                border-radius: 50%;
            }
        }
    }
    .modal_box_center {
        display: flex;
        flex-direction: column;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        justify-content: center;
        align-items: center;
        transform: scale(1.15);
        opacity: 0;
    }
    .modal_box_open {
        opacity: 1;
        transform: translate3D(0px, 0px, 0px) !important;
    }
    .modal_box_open .modal_box_center {
        transform: scale(1);
        opacity: 1;
    }
}
</style>
